<script setup lang='ts'>
import { reactive } from 'vue';
import { Search, Edit } from '@element-plus/icons-vue'
import userRoleAPI from '@/utils/userrole/userrole'
import rolesAPI from '@/utils/role/role'

// 定义数据
const formData = reactive({
    userRoleData: [{
        id: 1,
        user: '胡荣江',
        role: [],
    }],
    search: '',
    centerDialogVisible: false,
    userRoleTem: {
        id: 0,
        user: '1',
        role: [],
    },
    selectRoles: [1,],
    roles: [{
        value: [1,],
        label: 'hu'
    }],
    submitRolesUser: {
        id: 0,
        user: 1,
        role: [1,]
    }
})
const url = 'per-manage/roles-users/'
// 函数
// 添加了用户但查询不到的情况
const refreshuser = async () => {
    const urltem = url + 'refreshUser/'
    await userRoleAPI.urefreshUser(urltem)
    getUserRoles()
}

const searchUser = () => {
    formData.userRoleData = formData.userRoleData.filter((item: any) => {
        return item.user.includes(formData.search)
    })
}
const editUserRole = (data: any) => {
    formData.userRoleTem = data
    formData.selectRoles = formData.userRoleTem.role.map((item: any) => Number(item.match(/\d+/g)))
    formData.centerDialogVisible = true
}
// 更新数据
const updataUserRole = async () => {
    formData.submitRolesUser.role = formData.selectRoles
    const usernumber = formData.userRoleTem.user
    formData.submitRolesUser.user = Number(usernumber.match(/\d+/g)[0])
    formData.submitRolesUser.id = formData.userRoleTem.id
    const urltem = url + formData.submitRolesUser.id + '/'
    await userRoleAPI.editUserRoles(urltem, formData.submitRolesUser)
    getUserRoles()
    formData.centerDialogVisible = false
}
// 全局函数
const getUserRoles = async () => {
    const userroledata = await userRoleAPI.getuserroles(url)
    const alluserrole = userroledata.map((res: any) => {
        const roles = res.role.map((item: any) => {
            return item.id + '-' + item.desc
        })
        return {
            id: res.id,
            user: res.user.id + '-' + res.user.username,
            role: roles
        }
    })
    formData.userRoleData = alluserrole
}

const getRoles = async () => {
    const roles = await rolesAPI.get_all_role('/per-manage/roles/')
    formData.roles = roles.map((item: any) => {
        return {
            value: item.id,
            label: item.id + '-' + item.desc
        }
    })
}
getUserRoles()
getRoles()
</script>
<template>
    <div>
        <el-card shadow="hover" style="text-align: center;">用户与角色管理</el-card>
    </div>
    <!-- 查询 -->
    <div class="search-user">
        <el-input v-model="formData.search" style="max-width: 600px" placeholder="请输入用户名" class="input-with-select">
            <template #prepend>
                <el-button>查询用户</el-button>
            </template>
            <template #append>
                <el-button :icon="Search" circle @click="searchUser" />
            </template>
        </el-input>
        <el-text class="mx-1" type="danger">如果查询不到请刷新</el-text>
        <el-button @click="refreshuser">刷新</el-button>
    </div>
    <!-- 表格数据显示 -->
    <div>
        <el-table :data="formData.userRoleData" style="width: 100%" border>
            <el-table-column fixed type="index" label="序号" width="70" />
            <el-table-column prop="user" label="用户名" width="210" />
            <el-table-column prop="role" label="角色" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editUserRole(scope.row)" :icon="Edit" circle />
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 对话框 -->
    <el-dialog v-model="formData.centerDialogVisible" title="用户与角色管理" width="500" center>
        <span>
            <div>
                <el-input v-model="formData.userRoleTem.user" style="width:100%" disabled>
                    <template #prepend>用户名</template>
                </el-input>
            </div>
            <div class="select-role">
                <div>角色</div>
                <el-select v-model="formData.selectRoles" multiple placeholder="请选择角色" style="width: 100%">
                    <el-option v-for="item in formData.roles" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="formData.centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updataUserRole">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.search-user {
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
}

.refrsh-user {
    margin-right: 20px;
}

.select-role {
    display: flex;
    margin-top: 10px;
}

.select-role div {
    width: 10%;
    line-height: 250%;
    background-color: #f5f7fa;
    border: 2px solid #e6e9ef;
    text-align: center;
}
</style>